{% extends "pcweb/base.html" %}

{% load static %}
{% load jsonify %}


{% block page_body %}
<link href="{{ js_config.js_lib.element_css }}" rel="stylesheet">
<script src="{{ js_config.js_lib.element }}"></script>
<script src="{{ js_config.js_lib.layer }}"></script>
<script src="{{ js_config.js_lib.pcweb }}"></script>

<script>
    editor= {{ editor | jsonify }}
    editor_ctx ={{ editor_ctx | jsonify }}
    $(function(){

        live_root=new Vue({
            el:'#main-panel',
            data(){
                return {
                    editor:editor,
                    editor_ctx:editor_ctx,
                }
            },
        })

        function update_size(){
            var height = $(window).innerHeight() - $('.footer').height() - $('.header-bar').height()
            $(' #main-panel>.content').css('min-height',height + 'px')
        }
        window.addEventListener('resize', update_size)
    })


</script>
<style>
    body{
        font-size: 1.3rem;
    }
    #main-panel{
        position: relative;
        width: 100%;
    }

</style>
<div id="main-panel">
    <component :is="editor" v-bind="editor_ctx"></component>
</div>
{% endblock %}